import { BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const OrderStatistics = () => {
  const salesData = [
    { month: "1月", sales: 120000 },
    { month: "2月", sales: 150000 },
    { month: "3月", sales: 180000 },
    { month: "4月", sales: 200000 },
    { month: "5月", sales: 220000 },
    { month: "6月", sales: 250000 },
  ];

  const categoryData = [
    { category: "沙发", sales: 450000, percentage: 30 },
    { category: "餐桌椅", sales: 300000, percentage: 20 },
    { category: "床具", sales: 375000, percentage: 25 },
    { category: "办公家具", sales: 225000, percentage: 15 },
    { category: "储物", sales: 150000, percentage: 10 },
  ];

  // 按时段统计成交数量
  const timeSlotData = [
    { timeSlot: "00:00-06:00", orderCount: 42 },
    { timeSlot: "06:00-12:00", orderCount: 128 },
    { timeSlot: "12:00-18:00", orderCount: 216 },
    { timeSlot: "18:00-24:00", orderCount: 185 },
  ];

  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold mb-8">订单统计</h1>
      
      {/* Overview Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div className="bg-white rounded-lg shadow-md p-6">
          <h3 className="text-gray-500 text-lg mb-2">今日销售额</h3>
          <p className="text-3xl font-bold">¥24,560</p>
          <p className="text-green-500 mt-2">+12.5% 较昨日</p>
        </div>
        <div className="bg-white rounded-lg shadow-md p-6">
          <h3 className="text-gray-500 text-lg mb-2">本月销售额</h3>
          <p className="text-3xl font-bold">¥842,300</p>
          <p className="text-green-500 mt-2">+8.3% 较上月</p>
        </div>
        <div className="bg-white rounded-lg shadow-md p-6">
          <h3 className="text-gray-500 text-lg mb-2">今日订单数</h3>
          <p className="text-3xl font-bold">128</p>
          <p className="text-green-500 mt-2">+5.7% 较昨日</p>
        </div>
        <div className="bg-white rounded-lg shadow-md p-6">
          <h3 className="text-gray-500 text-lg mb-2">本月订单数</h3>
          <p className="text-3xl font-bold">3,420</p>
          <p className="text-green-500 mt-2">+3.2% 较上月</p>
        </div>
      </div>
      
      {/* Charts */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
        {/* Sales Trend */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-xl font-semibold mb-6">销售趋势</h2>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart
                data={salesData}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="month" />
                <YAxis 
                  tickFormatter={(value) => `¥${(value / 10000).toFixed(0)}万`}
                />
                <Tooltip 
                  formatter={(value) => [`¥${Number(value).toLocaleString()}`, '销售额']}
                  labelFormatter={(label) => `月份: ${label}`}
                />
                <Legend />
                <Line 
                  type="monotone" 
                  dataKey="sales" 
                  name="销售额" 
                  stroke="#3b82f6" 
                  activeDot={{ r: 8 }} 
                  strokeWidth={2}
                />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>
        
        {/* Category Distribution */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-xl font-semibold mb-6">商品类别销售分布</h2>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={categoryData}
                  cx="50%"
                  cy="50%"
                  labelLine={true}
                  label={({ name, percent }) => `${name}: ${(percent as number * 100).toFixed(0)}%`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="sales"
                  nameKey="category"
                >
                  {categoryData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'][index % 5]} />
                  ))}
                </Pie>
                <Tooltip 
                  formatter={(value) => [`¥${Number(value).toLocaleString()}`, '销售额']}
                  labelFormatter={(label) => `类别: ${label}`}
                />
                <Legend />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>
        
        {/* Time Slot Distribution */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-xl font-semibold mb-6">下单时段成交统计</h2>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={timeSlotData}
                margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="timeSlot" />
                <YAxis />
                <Tooltip 
                  formatter={(value) => [value, '订单数量']}
                  labelFormatter={(label) => `时段: ${label}`}
                />
                <Legend />
                <Bar 
                  dataKey="orderCount" 
                  name="订单数量" 
                  fill="#8b5cf6"
                />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>
      
      {/* Detailed Data */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Monthly Sales Table */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-xl font-semibold mb-6">月度销售数据</h2>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-gray-100">
                <tr>
                  <th className="text-left py-3 px-4">月份</th>
                  <th className="text-right py-3 px-4">销售额</th>
                  <th className="text-right py-3 px-4">环比增长</th>
                </tr>
              </thead>
              <tbody>
                {salesData.map((data, index) => (
                  <tr key={index} className="border-b">
                    <td className="py-3 px-4">{data.month}</td>
                    <td className="py-3 px-4 text-right">¥{data.sales.toLocaleString()}</td>
                    <td className="py-3 px-4 text-right text-green-500">
                      {index > 0 ? "+15%" : "-"}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        
        {/* Category Sales Table */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-xl font-semibold mb-6">商品类别销售数据</h2>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-gray-100">
                <tr>
                  <th className="text-left py-3 px-4">类别</th>
                  <th className="text-right py-3 px-4">销售额</th>
                  <th className="text-right py-3 px-4">占比</th>
                </tr>
              </thead>
              <tbody>
                {categoryData.map((data, index) => (
                  <tr key={index} className="border-b">
                    <td className="py-3 px-4">{data.category}</td>
                    <td className="py-3 px-4 text-right">¥{data.sales.toLocaleString()}</td>
                    <td className="py-3 px-4 text-right">{data.percentage}%</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        
        {/* Time Slot Orders Table */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-xl font-semibold mb-6">下单时段成交统计</h2>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-gray-100">
                <tr>
                  <th className="text-left py-3 px-4">时段</th>
                  <th className="text-right py-3 px-4">订单数量</th>
                  <th className="text-right py-3 px-4">占比</th>
                </tr>
              </thead>
              <tbody>
                {timeSlotData.map((data, index) => {
                  // 计算总订单数
                  const totalOrders = timeSlotData.reduce((sum, item) => sum + item.orderCount, 0);
                  const percentage = Math.round((data.orderCount / totalOrders) * 100);
                  
                  return (
                    <tr key={index} className="border-b">
                      <td className="py-3 px-4">{data.timeSlot}</td>
                      <td className="py-3 px-4 text-right">{data.orderCount}</td>
                      <td className="py-3 px-4 text-right">{percentage}%</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default OrderStatistics;